<template>
<!-- 不能用v-model 来使用value数据，因为v-model是双向的，即会给value赋值也会改值，但value是单向的不能修改 -->
  <!--:value 给组件赋值   -->
  <el-select @change="changeChannel" clearable :value="value" placeholder="请选择">
              <el-option 
                v-for="item in channelOptions" 
                :key="item.id" 
                :label="item.name" 
                :value="item.id">
              </el-option>
  </el-select>
</template>

<script>
export default {
name:'my-channel',
props:['value'],
data(){
    return {
        //channelId:null,
        //频道选项
       channelOptions:[],
    }
},
created(){
     this.getChannelOptions()
},
methods:{
    //选择频道
    changeChannel(val){
        //如果清空，val是“”字符串，应该设置成null
        if(val === ''){
            val = null
        }
        //将改变的数据传递给父组件
        this.$emit('input',val)
    }, 
    //获取频道数据
    async getChannelOptions(){
    const res= await this.$http.get('channels')
    console.log(res);
        this.channelOptions = res.data.data.channels   
    },
}
}
</script>

<style>

</style>